<!--
 * @Author: zi.yang
 * @Date: 2021-03-13 00:15:24
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-03-13 00:26:26
 * @Description: In User Settings Edit
 * @FilePath: \vue-music\src\components\state3\test-use.vue
-->

<template>
  <div>x:{{ x }} --- y:{{ y }}</div>
</template>

<script>
import { onMounted, onUnmounted, ref } from '@vue/composition-api';

function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

  function update(e) {
    x.value = e.pageX;
    y.value = e.pageY;
  }

  onMounted(() => {
    window.addEventListener('mousemove', update);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', update);
  });

  return { x, y };
}
export default {
  name: 'test-use',
  setup() {
    const { x, y } = useMousePosition();
    return { x, y };
  },
};
</script>

<style scoped></style>
